<#macro styleMacro>
  <style>
    .layui-input-inline.long-input input {
      min-width: 350px;
    }

    .layui-input-inline.layui-input-xs {
      width: 100px !important;
    }
  </style>
</#macro>
<#macro scriptMacro>
  <script>
    layui.use(['tinymce', 'form', 'xmSelect'], function () {
      var $ = layui.jquery,
          tinymce = layui.tinymce,
          form = layui.form,
          xmSelect = layui.xmSelect;

      var tagSelect = xmSelect.render({
        el: '#tagSelect',
        language: 'zn',
        filterable: true,
        data: [
          <#list tagList! as tag>
          {
            name: '${tag.tagName}',
            value: '${tag.id?c}'
            <#if article.tagIds?has_content&&article.tagIds?seq_contains(tag.id)>,
            selected: true
            </#if>
          },
          </#list>
        ]
      })

      form.on('switch(isOriginalFilter)', function (data) {
        this.checked ? $("#originalUrlDiv").hide() : $("#originalUrlDiv").show();
      });

      tinymce.render({
        elem: "#articleEditor",
        language: 'zh_CN',
        plugins: 'preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave bdmap indent2em autoresize',
        toolbar: 'code undo redo | bullist numlist | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | styleselect formatselect fontselect fontsizeselect | blockquote subscript superscript removeformat | table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap lineheight',
        fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
        height: 850, //编辑器高度
        min_height: 600,
        font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
        images_upload_url: '/article/uploadImg',
        toolbar_sticky: true,
        images_upload_handler: (blobInfo, success, failure) => {
          console.log(success);
          console.log(failure);
          let uploadData = new FormData();
          uploadData.append("file", blobInfo.blob());
          uploadData.append("articleId", $("input[name=id]").val());
          formDataAjax("${request.contextPath}/article/uploadImage", "POST", uploadData, function (result) {
            if (result.success) {
              success(result.data);
              layMsg(result.msg);
            } else {
              failure(result.msg);
            }
          })
          return true;
        }
      }, function () {
        setTimeout(function () {
          tinymce.get("#articleEditor").setContent(`${article.content!}`);
        }, 1000);
      });

      $("#saveBtn").on('click', function () {
        let editorContent = tinymce.get("#articleEditor").getContent();
        let formData = new FormData($("#articleForm")[0]);

        let tags = tagSelect.getValue();
        for (let i in tags) {
          formData.append("tagIds", tags[i].value);
        }
        formData.append("content", editorContent);
        let summary = tinymce.get("#articleEditor").getContent({"format": "text"});
        formData.append("summary", summary.substring(0, Math.min("${AppGlobalConstants.ARTICLE_SUMMARY_LENGTH}", summary.length)));

        formDataAjax("${request.contextPath}/article/save/", "POST", formData, function (result) {
          layMsg(result.msg);
        })
      })
    })
  </script>
</#macro>
<@zlt.page styleMacro=styleMacro scriptMacro=scriptMacro>
  <body>
  <div class="layuimini-container">
    <div class="layuimini-main">
      <form class="layui-form" id="articleForm">
        <input type="hidden" name="id" value="${article.id!}"/>
        <div class="layui-form-item">
          <label class="layui-form-label" for="titleIpt">文章标题</label>
          <div class="layui-input-inline long-input">
            <input type="text" id="titleIpt" name="title" autocomplete="off" placeholder="输入文章标题" class="layui-input"
                    value="${article.title!}">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">状态</label>
          <div class="layui-input-inline">
            <select name="status">
                <#list articleStatus as s>
                  <option value="${s.value}" <#if s.value==article.status!>selected</#if>>${s.desc}</option>
                </#list>
            </select>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">设置标签</label>
          <div class="layui-input-inline" style="width: 400px;">
            <div id="tagSelect"></div>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">首页展示</label>
          <div class="layui-input-inline layui-input-xs">
            <input type="checkbox" name="isIndex" lay-skin="switch" lay-text="是|否"
                    <#if article.isIndex!false>checked</#if>>
          </div>
          <label class="layui-form-label">密码访问</label>
          <div class="layui-input-inline layui-input-xs">
            <input type="checkbox" name="needPassword" lay-skin="switch" lay-text="是|否"
                    <#if article.needPassword!false>checked</#if>>
          </div>
          <label class="layui-form-label">置顶</label>
          <div class="layui-input-inline layui-input-xs">
            <input type="checkbox" name="isTop" lay-skin="switch" lay-text="是|否" <#if article.isTop!false>checked</#if>>
          </div>
          <label class="layui-form-label" for="originalSwitch">原创文章</label>
          <div class="layui-input-inline" style="width: 80px;">
            <input type="checkbox" id="originalSwitch" name="isOriginal" lay-filter="isOriginalFilter" lay-skin="switch"
                    lay-text="是|否" <#if article.original!false>checked</#if>>
          </div>
          <div class="layui-input-inline" id="originalUrlDiv" <#if article.original!false>style="display: none;"</#if>>
            <input type="text" name="originalUrl" autocomplete="off" placeholder="原文链接" class="layui-input"
                    value="${article.originalUrl!}">
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button type="button" class="layui-btn layui-btn-sm" id="saveBtn">保 存</button>
          </div>
        </div>
        <textarea id="articleEditor"></textarea>
      </form>
    </div>
  </div>
  </body>
</@zlt.page>